<script setup lang="ts">
import { computed, ref } from 'vue'
import Som from './som.vue'
import Sensitivity from './sensitivity.vue'
import Optimization from './optimization.vue'
import Contribution from './contribution.vue'
import useStore from '@/stores'
import { isEmptyObject } from '@/utils'

const props = defineProps<{
  currentStep: number
}>()

const { cases } = useStore()

// 前面还有2个步骤所以要从3开始
const typeComponent = {
  3: Som,
  4: Sensitivity,
  5: Optimization,
  6: Contribution,
} as any

const activekKeyMap = ref<any>({})
const caseInfo = computed(() => cases.caseInfo)
const activeKey = computed(() => props.currentStep)
const currentComponentRef = ref()

// 点击tabform相关步骤时初始化表单，让其自动加上skip为false属性直接运行
function initTabForm() {
  const detailData = caseInfo.value?.jsonArgs ? JSON.parse(caseInfo.value?.jsonArgs) : null
  if (detailData && !isEmptyObject(detailData)) {
    activekKeyMap.value = {
      3: {
        name: 'SOM',
        apiName: 'SOM',
        data: detailData.SOM,
      },
      4: {
        name: 'Sensitivity Analysis',
        apiName: 'Sensitivity_analysis',
        data: handlerSensitiveData(detailData),
      },
      5: {
        name: 'Optimization',
        apiName: 'Optimization',
        data: detailData.Optimization,
      },
      6: {
        name: 'Contribution',
        apiName: 'Contribution',
        data: detailData.Contribution,
      },
    }

    cases.initFormInfoSkip()
    const field = activekKeyMap.value[activeKey.value || 3]
    const { apiName: fieldName, data: fieldModel } = field
    const formInfo = Object.assign({}, cases.formInfo, { [fieldName]: { ...fieldModel, skip: false } })
    cases.saveFormInfo(formInfo)
  }
}

function handlerSensitiveData(detailData: any) {
  const [analysisStep, analysisStepVar] = handleFiveFormDRAndCluster(detailData)
  const sensitiveData = { ...detailData.Sensitivity_analysis, analysis_step: analysisStep, analysis_var: analysisStepVar }
  return sensitiveData
}

function handleFiveFormDRAndCluster(detailData: any) {
  const drMethod = detailData.DR.method
  const clusterMethod = detailData.Cluster.method
  const drMap = new Map([
    [0, 'DR:PCA'],
    [1, 'DR:PCA'],
    [2, 'DR:Umap'],
    [3, 'DR:Pacmap'],
    [4, 'DR:ICA'],
    [5, 'DR:SPE'],
    [6, 'DR:t-SNE'],
    [7, 'DR:TriMap'],
  ])
  const clusterMap = new Map([
    [0, 'Cluster:kmeans'],
    [1, 'Cluster:kmeans'],
    [2, 'Cluster:DBSCAN'],
    [3, 'Cluster:meanshift'],
    [4, 'Cluster:birch'],
    [5, 'Cluster:HDBSCAN'],
  ])
  const varMap = new Map([
    ['DR:PCA', ['n_components']],
    ['DR:Umap', ['n_components']],
    ['DR:Pacmap', ['n_components', 'n_heigh', 'MN_ratio', 'FP_ratio', 'num_iters']],
    ['DR:ICA', ['n_components']],
    ['DR:SPE', ['n_components', 'n_neigh']],
    ['DR:t-SNE', ['n_components', 'perplexity']],
    ['DR:TriMap', ['n_components']],
    ['Cluster:kmeans', ['Cluster_numbers']],
    ['Cluster:DBSCAN', ['minsamp1', 'epsilon']],
    ['Cluster:meanshift', ['Cluster_numbers', 'bandwidth1']],
    ['Cluster:birch', ['nclust2', 'threshold1', 'branch_factor']],
    ['Cluster:HDBSCAN', ['minsamp2']],
  ])
  const step = drMap.get(drMethod) || clusterMap.get(clusterMethod) || 'DR:PCA'
  return [step, varMap.get(step)![0] || 'n_components']
}

function onClickRunTabStep() {
  currentComponentRef.value?.onClickSubmitRun()
}

function onClickRefreshAllAction() {
  currentComponentRef.value?.onClickRefreshAllAction()
}

defineExpose({ initTabForm, onClickRunTabStep, onClickRefreshAllAction })
</script>

<template>
  <div class="case-next-wrapper case-form-wrapper">
    <div class="box">
      <div class="header">
        {{ activekKeyMap[activeKey]?.name }}
      </div>
      <div class="content">
        <component :is="typeComponent[activeKey]" ref="currentComponentRef" />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import url('../../common.less');
</style>
